$(function () {
    getAjax();
    getBack() 
    getCity();
    getLogin()
});

// 返回
function getBack() {
  $(".back").on("click", () => {
      location = "index_wzt.html";
  });
}

// 点击登录
function getLogin() {
    $(".login").on("click", () => {
        location = "login_wzt.html";
    });
}

// 点击地区切换地区
function getCity() {
    $(".city").on("click", () => {
        location = "city_lcz.html";
    });
}

// // 点击搜索
// function getSearch() {
//     $(".search").on("click", () => {
//         location = "2.html";
//     });
// }

// 点击list弹出下拉框

// 懒加载
  onscroll = lazyLoad

  function lazyLoad() {
    let clientHeight = document.documentElement.clientHeight
    let scollTop = document.documentElement.scrollTop || 0
    console.log(clientHeight, scollTop)
    let lazy = document.getElementsByClassName('lazy')
    for (let i = 0; i < lazy.length; i++) {
      let top = getPoint(lazy[i])
      console.log(top)
      if (scollTop + clientHeight > top + 100) {
        lazy[i].src = lazy[i].getAttribute('imgSrc')
        lazy[i].removeAttribute('imgSrc')
        lazy[i].className = ''
      }
    }
  }

  let getPoint = (obj) => {
    let t = obj.offsetTop
    while ((obj = obj.offsetParent)) {
      t += obj.offsetTop
    }
    return t
  }

// 渲染数据
async function getAjax() {
    let res = await axios.get("http://127.0.0.1:3033/zufang", {});
    console.log(res);
    let arr = res.data;
    console.log(arr);
    let count = [
      "slider1",
      "slider2",
      "slider3",
      "slider4",
      "slider5",
      "slider6",
      "slider7",
      "slider8",
      "slider1",
      "slider2",
      "slider3",
      "slider4",
      "slider5",
      "slider1",
      "slider6",
      "slider7",
      "slider8",
      "slider1",
      "slider2",
      "slider3",
      "slider4",
    ];
    for (let i = 0; i < 3; i++) {
        let ste = `
        <li class="lazy">
        <div class="nav_l">
          <img src="./img/${count[i]}.jpg" alt=""/>
        </div>
        <div class="nav_r">
          <div class="nav_r_tt">
            <p>${arr[i].title}</p>
          </div>
          <div class="nav_r_tb">
            <p>${arr[i].container}</p>
          </div>
          <div class="nav_r_bt">
            <p>${arr[i].container1}</p>
          </div>
          <div class="nav_r_bb">
            <p>${arr[i].container2}</p>
          </div>
        </div>
      </li>
          `;
        $(".nav_main").append(ste);
    }
    for (let i =4; i < arr.length; i++) {
        let str = `
        <li class="lazy">
        <div class="nav_l">
          <img src="./img/load.gif" imgSrc="./img/${count[i]}.jpg" alt="" class="lazy"/>
        </div>
        <div class="nav_r">
          <div class="nav_r_tt">
            <p>${arr[i].title}</p>
          </div>
          <div class="nav_r_tb">
            <p>${arr[i].container}</p>
          </div>
          <div class="nav_r_bt">
            <p>${arr[i].container1}</p>
          </div>
          <div class="nav_r_bb">
            <p>${arr[i].container2}</p>
          </div>
        </div>
      </li>
        `;
        $(".nav_main").append(str);
    }
}
